<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./ajax.js"></script>
</head>
<body>
	<div id="area">
		<select name="prov" id="prov"></select><select name="city" id="city"></select><select name="qx" id="qx"></select>
	</div>
	<script>
		
		var prov=document.getElementById('prov');
		var city=document.getElementById('city');
		var qx=document.getElementById('qx');
		
		post("area.php","id=1",function(res){
			var datas=eval("("+res+")");
			var str="";
			for(var i in datas){
				str+="<option value="+datas[i]['id']+">";
				str+=datas[i]['name'];
				str+="</option>";
			}
			prov.innerHTML=str;
		},false)
		//市级
		getData(prov);

		//区县
		getData(city);

		//更改省份时
		prov.onchange=function(){
			//获取选中的ID
			getData(prov);
			//
			getData(city);
		}
		city.onchange=function(){
			getData(city);
		}
		



function getData(selector){
			var id=selector.value;
			post("area.php","id="+id,function(res){
				var datas=eval("("+res+")");
				var str="";
				for(var i in datas){
					str+="<option value="+datas[i]['id']+">";
					str+=datas[i]['name'];
					str+="</option>";
				}
				selector.nextSibling.innerHTML=str;
			},false)
		}
	
	</script>
	
</body>
</html>